﻿@using WebAppModel
@{
    Layout = null;
    UserScanQRInfoModel user = Session["user"] as UserScanQRInfoModel;
     
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

    <script src="~/Content/Script/jquery.min.js"></script>
    <script src="~/Scripts/base64.js"></script>
    <title>手机验证</title>


    <style>
     * {
            padding: 0;
            margin: 0;
            cursor:pointer;
        }

        #content {
            position: absolute;
            width: 100%;
            height: 100%;
        }
          #LoadingBar {
            position:absolute;
            background-color: rgba(0,0,0,.85);
            width: 100%;
            height: 100%;
            display:flex;
            align-items:center;
            justify-content:center;
            z-index:999;
        }


        .phone {
            width: 90%;
            height: 100%;
             
            /*background: url("https://15448716.h40.faiusr.com/2/7/ACgIABACGAAgqdaD0QUooc7ujQUw0AU4gAo.jpg");
            background-size: 100% 100%;*/
            padding: 0 5%;
        }

            .phone > p:nth-child(1) {
                color: #E29F7B;
                padding-top: 10px;
                font-size: 18px;
            }

            .phone > p:nth-child(2) {
                color: #E29F7B;
                margin: 5px 0 10px;
            }

            .phone .phone-num {
                display: flex;
                align-items: center;
                background-color: white;
                border-radius: 3px;
                margin-bottom: 10px;
            }

                .phone .phone-num > span {
                    padding: 5px;
                }

                .phone .phone-num > input {
                    border: none;
                    width: 100%;
                    border-radius: 3px;
                    height: 40px;
                    line-height: 40px;
                    font-size: 18px;
                }

            .phone .sure {
                display: block;
                text-decoration: none;
                background-color: #FFCC00;
                text-align: center;
                height: 40px;
                color: #763401;
                line-height: 40px;
                border-radius: 4px;
                margin: 20px auto;
                font-size:18px;
            }

            .phone .user-info {
                border: 1px solid #d7d7d7;
                border-radius: 6px;
                width: 100%;
                height: 120px;
                overflow: hidden;
            }

                .phone .user-info > ul {
                    margin: 0;
                    padding: 0;
                }

                    .phone .user-info > ul > li {
                        display: flex;
                        padding: 10px 0;
                        align-items: center;
                    }

                        .phone .user-info > ul > li > img {
                            width: 35px;
                            height: 35px;
                            border-radius: 40px;
                            margin-left: 10px;
                        }

                        .phone .user-info > ul > li > span {
                            color: white;
                        }


                            .phone .user-info > ul > li > span:nth-child(2) {
                                width: 60px;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                white-space: nowrap;
                            }
    </style>


</head>
<body id="content">
  
    <div id="LoadingBar">
        <img src="~/Content/Images/redpack/loading.gif" />
    </div>
    
</body>
</html>
<script src="~/Scripts/base64.js"></script>
<script>
    var aId = "@ViewBag.Aid";//模板Id
 
    $.ajax({
        url: "VerificationHtml",
        data: { aId: aId },
        type: "post",
        success: function (res) {

            var html = decode(res);

            $("#content").append(html);

            $('title').text($('.pageTitle > span').text());
            $('.pageTitle').remove();
        }
    });

</script>


<script>
    //{
    //    "reason": "短信发送成功",
    //        "result": {
    //        "count": 1, /*发送数量*/
    //            "fee": 1, /*扣除条数*/
    //                "sid": "23d6bc4913614919a823271d820662af" /*短信ID*/
    //    },
    //    "error_code": 0 /*发送成功*/
    //}
    //中奖信息滚动




    function DateFormat(val) {
        var date = new Date(parseInt(val.replace("/Date(", "").replace(")/", ""), 10));
        //月份为0-11，所以+1，月份小于10时补个0
        var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
        var currentDate = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
        var dd = date.getFullYear() + "-" + month + "-" + currentDate;
        return dd;
    }

    //获取中奖名单滚动数据

    function RollMessage(ele, speed) {//ele 是 ul 的父元素
        var timer;
        var scroll_top = 0;
        var obj = $(ele);
        var li_height = obj.find("ul li:first").height() + 20;
        //console.log(li_height)
        obj.hover(function () {
            clearInterval(timer);
        }, function () {
            timer = setInterval(function () {
                scroll_top++;
                if (scroll_top >= li_height) {
                    scroll_top = 0;
                    obj.find("ul li:first").appendTo(obj.find("ul"));
                }
                obj.find("ul").css("margin-top", -scroll_top);

            }, speed || 40);
        }).trigger("mouseleave");
    }
    getInfo();
    var num = /^1[1-9]\d{9}$/;

    function PhoneSure() {
        var phoneNum = $("#phoneNum").val();
        if (!num.test(phoneNum)) {
            alert('请输入正确的手机号码');
            return;
        }
        if ($('#SMS').val() == '') {
            alert('请输入验证码');
            return;
        }
    }


    //$('#content').on('click', '#PhoneSure', function () {
    //    var phoneNum = $("#phoneNum").val();
    //    if (!num.test(phoneNum)) {
    //        alert('请输入正确的手机号码');
    //        return;
    //    }
    //    if ($('#SMS').val() == '') {
    //        alert('请输入验证码');
    //        return;
    //    }
    //})

    $('#content').on('click', '#GetSMS', function () {
        var that = this;
        var str = $(this).parent().prev().children('input').val();
        if (!num.test(str)) {
            alert('请输入正确的手机号码!');
        }
        else {
            $(this).attr('disabled', 'disabled');
            var Num = 30;
            //倒计时
            time();
            function time() {
                Num--;
                if (Num > 0) {
                    $(that).val(Num + '秒后重发');
                    setTimeout(function () {
                        time();
                    }, 1000);

                }
                else {
                    $(that).val('获取验证码');
                    $(that).removeAttr('disabled');
                }
            }

            //发送验证码给手机
            SendSMS(str, SMS);
            function SendSMS(str, smsStr) {
                $.ajax({
                    url: "/app/WebTemplate/SMSApi",
                    type: "GET",
                    async: false,
                    data: {
                        phoneNum: str 
                    },
                    success: function (SMS) {
                        //SMS发送到手机的验证码
                        // 判断验证码是否正确
                        $('#content').on('click', '#PhoneSure', function () {
                            if ($("#SMS").val() == SMS) {
                                getPhone(str);//给该手机的用户发奖品
                            }
                            else if ($("#SMS").val() == '') {
                                alert("验证码不能为空!");
                                return;
                            }
                            else {
                                alert("请输入正确的验证码!");
                            }
                        })
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        alert(XMLHttpRequest.status);
                        alert(XMLHttpRequest.readyState);
                        alert(textStatus);
                    }
                });
            }



        }
    })

    var tid = "@ViewBag.Tid";//模板Id
    function getPhone(num) {
        $.ajax({
            type: "get",
            url: '/app/WebTemplate/ToReceive',
            data: {
                Phone: num,
            },
            success: function (theid) {
                location.href = "GetFinished?theId=" + tid+"&tid="+tid;
            }
            ,
            error: function (r) {
                alert(r.status)
            }
        });
    }
    //名字太长取前两位 加**
    function NameEncrypt(str) {
        return str <= 2 ? str + "**" : str.substring(0, 2) + "**";
    }


    //获取中奖名单滚动数据
    function getInfo() {

        $.ajax({
            type: "get",
            url: '/app/WebTemplate/GetTheWinningList',
            data: {
                pageIndex: 1,
                pageSize: 10,
                aId:"@user.Aid"
            },
            success: function (data) {
                $('.user-info > ul').html('');
                if (data.PageData.length == 0) {
                    $('.user-info > ul').append('<li style="margin-top:30px;color:#BFBFBF;justify-content:center;">暂无用户中奖</li>');
                }
                else {
                    $(data.PageData).each(function (i, ele) {
                        var e = '<li><img src=' + ele.HeadImgUrl + ' alt="null"><span style="margin-left: 10px">' + NameEncrypt(decode(ele.Nickname) )+ ' </span><span  style="flex: 1;text-align:center;">' + DateFormat(ele.Time) + '</span><span style="margin-right: 10px">' + ele.Denomination + ' 元</span></li>';
                        $('.user-info > ul').append(e);
                    })
                    if (data.PageData.length > 4) {
                        RollMessage('.user-info', 45);
                    }

                }

            },
            error: function (r) {
                alert(r.status)
            }
        });
    }

    function initPage() {
     
        var objLoading = document.getElementById("LoadingBar");
        if (objLoading != null) {
            objLoading.style.display = "none";
        }
    }
   initPage();
   //setTimeout(initPage, 5000)

</script>